<template>
    <div class="page">
      <div class="title-1 title">佳莲社会实践大课堂</div>

      <div class="title-2 title">{{classSpace[space].school}} 课堂空间</div>

      <div class="top-card">
        <div class="left">
            <div>共建学校：{{classSpace[space].school}}</div>
            <div>课程名称：{{classSpace[space].name}}</div>
            <div>课程简介：{{classSpace[space].desc.slice(5)}}</div>
        </div>
        <div class="right">
            <img :src="classSpace[space].cover" alt="" mode="aspectFill">
        </div>
      </div>
        
      <div class="feedback-wrapper">
        <button class="feedback" @click="clickFeedback">评教反馈</button>
      </div>

      <div class="class-info-title">课程信息</div>
      <div class="class-info">
        <div class="card" v-for="(item, index) in classSpace[space].info" :key="index" @tap="onTapCardItem(item)">
            <div class="left">
                <img :src="classInfoCover[index]" alt="">
                <span>{{weekName[index]}}</span>
            </div>
            <div class="right">
                <span>教师名称：{{item.teacher}}</span>
                <span>学校：{{item.school}}</span>
                <span>班级：{{item.class}}</span>
                <span>人数：{{item.number}}</span>
            </div>
        </div>
      </div>

    </div>
  </template>
  
  <script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'
  import axios from 'axios'
  
  export default {
    name: 'classspace',
    data(){
        return {
            classInfoCover:[require("../../public/week-icon/week-1.png"),require("../../public/week-icon/week-2.png"),require("../../public/week-icon/week-3.png"),require("../../public/week-icon/week-4.png"),require("../../public/week-icon/week-5.png"),require("../../public/week-icon/week-6.png"),require("../../public/week-icon/week-7.png")],
            space:0,
            weekName:["星期一","星期二","星期三","星期四","星期五","星期六","星期天"],
            classSpace:[
                {
                    space:"空间1",
                    school:"北京邮电大学",
                    name:"新时代志愿服务与乡村振兴",
                    desc:'课程内容：案例教学、小组讨论和互动交流、志愿服务体验，通过互动体验教学提升学生志愿服务及参与乡村振兴意识及精神。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
                {
                    space:"空间2",
                    school:"北京科技大学",
                    name:"揭秘人工智能",
                    desc:'课程内容：计算机视觉、刷卡编程、语音识别、自然语言处理，通过人工智能技术提升学生生活技能。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
                {
                    space:"空间3",
                    school:"北京大学",
                    name:"新媒体联结生活",
                    desc:'课程内容：媒体素养——培养学生使用、理解、批判、创造以及分析媒介内容的能力，通过新媒体素养教育塑造学生正确的劳动观念。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
                {
                    space:"空间4",
                    school:"北京电影学院",
                    name:"爱上电影大课堂",
                    desc:'课程内容：传统文化、电影拍摄、动画电影，通过表演艺术和传统文化丰富劳动教育形式。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
                {
                    space:"空间5",
                    school:"中央财经大学",
                    name:"金融小能手",
                    desc:'课程内容：超市购物（情景）、银行存款（虚拟）、识别真假币、职业体验、点钞比赛、理财小账本、压岁钱管理，培养学生金融素养和社会价值观。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
                {
                    space:"空间6",
                    school:"北京工商大学",
                    name:"草本植物伴随每一天",
                    desc:'课程内容：通过让学生亲身体验化妆品的制作过程，了解和认识植物的功效和作用，培养学生对美的正确认识，提升学生美的素养。。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
                {
                    space:"空间7",
                    school:"中国木偶艺术剧院",
                    name:"草本植物伴随每一天",
                    desc:'课程内容：通过讲木偶、做木偶，让学生欣赏木偶艺术的同时，动手制作自己喜欢的木偶角色，提升学生的动手能力。',
                    cover:require("../../public/top-default-image.jpg"),
                    info:[
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                        {
                            teacher:"李文玉",
                            school:"北京四中",
                            class:"2021级3年级2班",
                            number:80
                        },
                    ]
                },
            ]
        }
      },
    components: {
  
    },
  
    // 组件创建之前调用钩子
    created: function () {
      this.space=parseInt(this.$route.query.space)
      console.log("接收的参数是：",this.$route.query,this.space)
    //   this.fetchData();
    //   this.userRole = sessionStorage.getItem("role");
  
    //   // 获取网格信息
    //   axios.get('/api/wx/grid',{
    //       params: { 
    //         id:this.gridId
    //     }}).then((response) => {
    //       console.log("返回的网格信息是：",response.data)
    //       let data=response.data.data;
    //       // 标题
    //       this.buildingName=data.building_name
    //       // 网格信息部分
    //       this.department=data.department
    //       this.name = data.name
    //       this.community = data.community
    //       this.no=data.no
    //       this.area=data.area
    //       this.phone=data.phone.split(',')
    //       this.buildingId=data.building_id;
    //       this.gridId=data.id
    //       if(data.img.length!=0){
    //         this.realBuildingImageSrc=data.img;
    //       }
    //       // 通知
    //       if(typeof(data.notifications) === "undefined"||data.notifications===null){
    //         this.notes=[]
    //       }
    //       else{
    //         this.notes=data.notifications
    //       }
            
    //       this.notesShow=this.notes.slice(0,2);
    //     })
    },
  
    // 组件挂在完成钩子
    mounted:function (){
      // this.notesShow=this.notes.slice(0,2);
    },
  
    // 定义方法
    methods:{
        clickFeedback(){
            console.log("点击了feedback")
            window.location.href='https://www.wjx.cn/vm/YkBN2af.aspx';
        }
    }
  }
  </script>
  
  <style scoped>
  .page{
    background-color: #E3DBDF;
    width: 100%;
    min-height: 100vh;
  }

  /*顶部两个文本标题*/
  .title-1{
    background-color: #dfd0d6;
  }
  .title{
    font-size: 24px;
    color: #787174;
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
  }

  /*顶部卡片样式*/
  .top-card{
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .top-card .left{
    font-size: 20px;
    color: #868083;
  }
  .top-card .right img{
    width: 100px;
    height: 80px;
  }


  
  /*反馈按钮*/
  .feedback-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .feedback{
    width: 80%;
    margin: 0 auto;
    padding: 10px 0;
    color: white;
    font-size: 14px;
    background-color: #7FA6C7;
    border-radius: 8px;
    border: none;
  }

  .class-info-title{
    color: #797275;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 5px;
    margin-left: 20px;
  }

  .card{
    margin: 10px 10px;
    background-color: #CACDD7;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    border-radius: 5px;
  }
  .card .left{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30px;
  }
  .card .left img{
    width: 50px;
    height: 50px;
  }
  .card .left span{
    color: #757882;
    font-size: 14px;
  }
 .card .right{
    display: flex;
    flex-direction: column;
    text-align: left;
 }
  .card .right span{
    color: #757882;
    font-size: 14px;
  }

  </style>